<template>
  <div class="homepage">
    <header class="top-banner">
      <img 
        src="@/assets/feige.png" 
        alt="背景" 
        class="banner-bg"
      >
      <div class="banner-content">
        <div class="logo-container">
          <img 
            src="@/assets/zhiyuan.png" 
            alt="网站logo" 
            class="logo"
          >
          <div class="site-title">青年志愿服务网 CYVA</div>
        </div>
        <div class="search-box">
          <select class="search-type">
            <option value="news">新闻文章</option>
            <option value="volunteer">志愿项目</option>
            <option value="volunteer_team">志愿队伍</option>
          </select>
          <input 
            type="text" 
            placeholder="请输入关键词" 
            class="search-input"
          >
          <button class="search-btn">搜索</button>
        </div>
      </div>
    </header>
    <nav class="main-nav">
      <ul class="nav-list">
        <li class="nav-item">首页</li>
        <li class="nav-item" @click="ProgramView">志愿项目</li>
        <li class="nav-item" @click="TeamView">志愿队伍</li>
        <li class="nav-item">志愿风采</li>
        <li class="nav-item">信息动态</li>
        <li class="nav-item">媒体报道</li>
        <li class="nav-item">研究培训</li>
        <li class="nav-item">政策文件</li>
        <li class="nav-item">通知公告</li>
        <li class="nav-item" @click="LoginView">登录</li>
        <li class="nav-item" @click="ZhuceView">注册</li>
        <li class="nav-item" @click="PersonView">个人中心</li>
        <li class="nav-item" @click="ChatView">汤圆AI</li>
        <li class="nav-item">更多</li>
       
      </ul>
    </nav>
    <main class="content">
      <section class="headline">
        <div class="headline-tag">头条</div>
        <h2 class="headline-title">习近平回信支教西部计划志愿者</h2>
      </section>
      <section class="content-wrap">
        <div class="img-box">
          <img 
            src="@/assets/chongqing.png" 
            alt="重庆大学志愿"
          >
          <p class="img-desc">重庆大学志愿服务队</p>
        </div>
        <div class="info-dynamic">
          <h3 class="info-title">信息动态</h3>
          <ul class="dynamic-list">
            <li class="dynamic-item">
              <span class="dot">•</span> 
              <span class="item-text">置顶 习近平给谢依特小学戍边支教西部计划志愿者服务队队员回信</span> 
              <span class="item-date">2025-05-02</span>
            </li>
            <li class="dynamic-item">
              <span class="dot">•</span> 
              <span class="item-text">置顶 习近平给华中农业大学“本禹志愿服务队”回信勉励青年志愿者</span> 
              <span class="item-date">2013-12-05</span>
            </li>
            <li class="dynamic-item">
              <span class="dot">•</span> 
              <span class="item-text">置顶 中央社会工作部有关负责人就《关于健全新时代志愿服务体系的意见》答记者问</span> 
              <span class="item-date">2024-04-23</span>
            </li>
            <li class="dynamic-item">
              <span class="dot">•</span> 
              <span class="item-text">置顶 中央社会工作部 教育部 司法部关于印发《关于加强高校法律援助志愿服务工作的意见》的通知</span> 
              <span class="item-date">2024-08-02</span>
            </li>
            <li class="dynamic-item">
              <span class="dot">•</span> 
              <span class="item-text">习近平给湖北十堰丹江口库区的环保志愿者的回信</span> 
              <span class="item-date">2024-08-13</span>
            </li>
            <li class="dynamic-item">
              <span class="dot">•</span> 
              <span class="item-text">人民网评：以志愿服务汇聚美丽中国建设合力</span> 
              <span class="item-date">2025-06-30</span>
            </li>
            <li class="dynamic-item">
              <span class="dot">•</span> 
              <span class="item-text">第23批国际中文教育志愿者赴泰开展中文教育</span> 
              <span class="item-date">2025-06-16</span>
            </li>
            <li class="dynamic-item">
              <span class="dot">•</span> 
              <span class="item-text">第八届数字中国建设峰会志愿者培训有序开展</span> 
              <span class="item-date">2025-04-14</span>
            </li>
          </ul>
        </div>
      </section>
    </main>
    <div 
      class="back-top" 
      @click="backToTop"
    >
      TOP<br>显示
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlueLayoutPage',
  methods: {
    backToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    TeamView() {
      this.$router.push('/TeamView');
    },
    LoginView() {
      this.$router.push('/LoginView');
    },
    ChatView() {
      this.$router.push('/ChatView');
    },
    ZhuceView() {
      this.$router.push('/ZhuceView');
    },
    ProgramView() {
      this.$router.push('/ProgramView');
    },
    PersonView() {
      this.$router.push('/PersonView');
    }
  }
}
</script>

<style scoped>
.homepage {
  font-family: Arial, sans-serif;
  background-color: #eaf5fc; 
  color: #333;
}
.top-banner {
  position: relative;
  width: 100%;
}
.banner-bg {
  width: 100%;
  height: 150px;
  display: block;
  object-fit: cover;
}
.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  box-sizing: border-box;
}
.logo-container {
  display: flex;
  align-items: center;
}
.logo {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  border-radius: 100px;
}
.site-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff; 
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  width: 40%; 
  max-width: 500px; 
}
.search-type {
  padding: 6px 10px;
  border: none;
  background-color: #f0f8ff; 
}
.search-input {
  padding: 6px 10px;
  border: none;
  outline: none;
  flex: 1; 
}
.search-btn {
  padding: 6px 20px;
  border: none;
  background-color: #4682b4; 
  color: #fff;
  cursor: pointer;
}
.main-nav {
  background-color: #4682b4;
  width: 100%; 
}
.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-item {
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.nav-item:hover {
  background-color: #1e3a5f;
}
.content {
  width: 90%;
  margin: 20px auto;
}
.headline {
  margin-bottom: 20px;
}
.headline-tag {
  background-color: rgb(182 11 39 / 99%);
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 10px;
}
.headline-title {
  margin: 0;
  font-size: 24px;
}
.content-wrap {
  display: flex;
  justify-content: space-between;
}
.img-box {
  width: 48%;
}
.img-box img {
  width: 100%;
  height: auto;
  display: block;
}
.img-desc {
  text-align: center;
  margin-top: 10px;
}
.info-dynamic {
  width: 48%;
}
.info-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #4682b4;
}
.dynamic-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dynamic-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.dot {
  color: #4682b4;
  margin-right: 5px;
}
.item-text {
  flex: 1;
}
.item-date {
  color: #999;
}
.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #4682b4;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

</style>
